import React, { useMemo } from 'react'
import { NavBar, Card, Toast, List,Checkbox } from 'antd-mobile'
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import { AddCircleOutline, RightOutline } from 'antd-mobile-icons'
import { useDispatch, useSelector } from 'react-redux'
import { SwitchPer } from '../../store/Person'
import { SubmitBar } from 'react-vant';

function Index() {
  let navigate = useNavigate()
  let dispatch=useDispatch()
  const {state}=useLocation()


  const { PersonList } = useSelector((state) => state.PerReducer)

  const SelePerson=useMemo(()=>{
    return PersonList
  },[PersonList])

  console.log(SelePerson)

  const price=PersonList[0].num*SelePerson.length

  //跳转支付
  const handelPay=()=>{
    const id=Math.random().toString().slice(2,6)
    navigate(`/pay?id=${id}&price=${price}&title=订单支付`)
  }

  return (
    <div>
      <NavBar onBack={() => navigate('/')}>订单</NavBar>
      <Card
        title={
          <div style={{ fontWeight: 'normal' }}>
            <AddCircleOutline style={{ marginRight: '4px', color: 'red' }} />
            支持选择多个收货地址
          </div>
        }
        extra={<RightOutline />}
        style={{ borderRadius: '16px' }}
      >
      </Card>
      <Card title='购买' >
        <List>
          {
            PersonList.map((item, index) => {
              return <List.Item key={index}
                extra={<div>
                  ￥{item.num}
                  <Checkbox checked={item.state} onChange={()=>dispatch(SwitchPer(item))}/>
                </div>}>
                {item.name}
                <p style={{ fontSize: '14px' }}>配送服务<span style={{ marginLeft: '100px', color: "#ccc" }}>快递，免运邮</span></p>
                <p style={{ fontSize: '14px' }}>店铺优惠<span style={{ marginLeft: '100px', color: "#ccc" }}>组合优惠</span></p>
                <p style={{ fontSize: '14px' }}>开具发票<span style={{ marginLeft: '100px', color: "#ccc" }}>本次不开具发票</span></p>
                <p style={{ fontSize: '14px' }}>订单备注<span style={{ marginLeft: '100px', color: "#ccc" }}>无备注</span></p>
              </List.Item>
            })
          }
        </List>
      </Card>
      <SubmitBar price={price*100} buttonText="提交订单" onSubmit={()=>handelPay()}/>
    </div>
  )
}

export default Index
